<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>负margin等高--伪等高</title>
  <style>
    .box {
      overflow: hidden;
      min-height: 100%;
    }

    .left {
      float: left;
      width: 100px;
      margin-right: -100%;
      background: lightgoldenrodyellow;
      margin-bottom: -9999px;
      padding-bottom: 9999px;
      min-height: 300px;
    }

    .right {
      float: left;
      margin-left: 100px;
      background: lawngreen;
      margin-bottom: -9999px;
      padding-bottom: 9999px;
      min-height: 100px;
    }

  </style>
</head>

<body>
<div class="box">
  <div class="left">
    右边部分
  </div>
  <div class="right">
    因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，使背景色铺满元素区域，又符合元素的盒模型的计算公式，实现视觉上的等高效果
    <br>
    <a href="https://www.baidu.com">百度百度百度百度百度百度百度百度百度百度百度百度百度</a>
    <hr>
    　　[注意]如果页面中使用a锚点跳转时，将会隐藏部分文字信息
    <hr>
    　　[注意]如果页面中的背景图片定位到底部，将会看不到背景图片
    <hr>
    　　[注意]如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果,只能通过加div或背景图模仿边框

  </div>
</div>
</body>
</html>